<template>
  <div class="goodCategory">
    <el-button
      type="primary"
      @click="addCate()"
      v-has="122"
      :disabled="!$store.state.btn_permission.includes('122')"
      >添加分类</el-button
    >

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="cat_id"
      border
      :tree-props="{ children: 'children' }"
    >
      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <span>{{ scope.row.cat_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否有效">
        <template>
          <i class="el-icon-success"></i>
        </template>
      </el-table-column>

      <el-table-column label="级别">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="80px" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="editCategory(scope.row)"
            v-has="123"
            :disabled="!$store.state.btn_permission.includes('123')"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="delCategory(scope.row)"
            v-has="123"
            :disabled="!$store.state.btn_permission.includes('123')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageNum"
      layout="total,  prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 编辑框 -->
    <edit-cate-dialog></edit-cate-dialog>
    <!-- 添加框 -->
    <add-cate-dialog></add-cate-dialog>
  </div>
</template>

<script>
import {
  getGoodCategory,
  getTotalLevel0Num,
  delGoodCategory,
} from "@/api/goods";
import editCateDialog from "./childComponents/GoodCategory/editCateDialog.vue";
import addCateDialog from "./childComponents/GoodCategory/addCateDialog.vue";

export default {
  name: "goodCategory",
  data() {
    return {
      tableData: [
        {
          cat_id: 3,
          cat_deleted: 0,
          car_name: "123",
          cat_level: 0,
          children: [
            {
              cat_id: 2,
              cat_deleted: 0,
              car_name: "123",
              cat_level: 1,
            },
          ],
        },
      ],
      currentPage: 1,
      pageNum: 4,
      total: 0,
    };
  },
  components: { editCateDialog, addCateDialog },
  created() {
    this.initGoodCategory();
    this.initCategoryTotal();
    this.$bus.$on("changeCateSuccess", () => {
      this.initGoodCategory();
    });
  },
  methods: {
    initGoodCategory() {
      getGoodCategory(this.currentPage, this.pageNum).then(
        (res) => {
          // console.log(res);
          this.tableData = res.data.data;
        },
        (err) => {
          console.warn(err);
        }
      );
    },
    initCategoryTotal() {
      getTotalLevel0Num().then(
        (res) => {
          this.total = res.data.total;
        },
        (err) => {
          console.warn(err);
        }
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initGoodCategory();
    },
    editCategory(row) {
      this.$bus.$emit("editCateVisible", row.cat_id, row.cat_name);
    },
    delCategory(row) {
      this.$confirm("确定删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delGoodCategory(row.cat_id).then(
            (res) => {
              // console.log("000 ", this.currentPage, this.total);
              if (res.data.status === 200) {
                this.initCategoryTotal(); //total
                setTimeout(() => {
                  //判断删除后是不是最后一页
                  // console.log("111 ", this.currentPage, this.total);
                  if (this.total % this.pageNum === 0 && this.currentPage > 1) {
                    this.currentPage -= 1;
                  }
                  this.initGoodCategory(); //刷新
                  return this.$message.success("删除该类别成功");
                }, 200);
              } else {
                this.$message.error("删除该类别失败");
              }
            },
            (err) => {
              this.$message.error("删除该类别失败");
            }
          );
        })
        .catch(() => {});
    },
    addCate() {
      this.$bus.$emit("addCate");
    },
  },
};
</script>

<style  scoped>
.el-table ::v-deep th.el-table__cell {
  color: black;
  background-color: #f8f8f9;
}
.goodCategory {
  padding: 20px;
}
.el-pagination {
  text-align: center;
}
.el-table {
  margin-top: 10px;
}
.el-table .el-button {
  position: relative;
  width: 60px;
  height: 30px;
  font-size: 13px;
}

::v-deep [class="el-icon-delete"],
::v-deep [class="el-icon-edit"],
::v-deep [class*="el-icon-"] + span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
::v-deep [class="el-icon-edit"],
::v-deep [class="el-icon-delete"] {
  position: absolute;
  left: calc(50% - 15px);
}

[class="el-icon-success"] {
  color: #90ee90;
}
</style>
